<template>
    <div class="app-container">
      <el-card class="box-card">
          <div class="flex flex-wrap">
            <div>
              <span>用户ID：</span>
              <el-input
                  v-model.number="listQuery.user_id"
                  class="marginRB10"
                  clearable
                  placeholder="请输入用户ID"
                  style="width: 200px"
              ></el-input>
            </div>
            <div>
              <span>用户昵称：</span>
              <el-input
                  v-model.number="listQuery.nickname"
                  class="marginRB10"
                  clearable
                  placeholder="请输入用户昵称"
                  style="width: 200px"
              ></el-input>
            </div>
            <div>
              <span>开始时间：</span>
              <el-date-picker v-model="listQuery.start_time" class="marginRB10" placeholder="开始时间"
                              type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
            <div>
              <span>结束时间：</span>
              <el-date-picker v-model="listQuery.end_time" class="marginRB10" placeholder="结束时间"
                              type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
            <div>
              <span>状态：</span>
              <el-select v-model="listQuery.status" placeholder="请选择" clearable filterable>
                <el-option v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              
            </div>
            <el-button
              class="marginRB10"
              icon="el-icon-search"
              type="primary"
              @click="searchSubmit"
            >搜索
            </el-button>
            <el-button class="marginRB10" @click="resetSubmit">重置</el-button>
        </div>
        <div v-loading="listLoading" class="item">
          <el-table ref="dataList"
                    :data="menuList"
                    border
          >
            <el-table-column label="歌曲名称" prop="name"></el-table-column>
            <el-table-column label="歌手" prop="singer"></el-table-column>
            <el-table-column label="上传用户" prop="user.nickname"></el-table-column>
            <el-table-column label="上传用户ID" prop="user.user_code"></el-table-column>
            <el-table-column label="大小" prop="size"></el-table-column>
            <el-table-column label="歌曲内容" prop="url">
              <template slot-scope="scope">
                <audio :src="scope.row.url" controls></audio>
              </template>
            </el-table-column>
            <el-table-column label="上传时间" prop="created_at"></el-table-column>
            
            <el-table-column label="状态" width="200px">
              <template slot-scope="{row}">
                <el-tag v-if="row.status === 1" type="success" size="normal"  effect="dark">通过</el-tag>
                <el-tag  v-if="row.status === -1" type="danger" size="normal"  effect="dark">拒绝</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="驳回原因" prop="remark"></el-table-column>
          </el-table>
          <!-- 分页 -->
          <cus-pagination :limit.sync="listQuery.perPage" :page.sync="listQuery.page" :total="total"
                          @pagination="getList"
          />
        </div>
      </el-card>
      
    </div>
</template>
  
<script>
  import {  songAuditLog } from '@/api/musicManagement'
  
  export default {
    data() {
      return {
  
        // confirmBtn: false,
        giveShowDetailPicture: [],
        giveShowPicture: [],
        // token值
  
        options: [
          { value: 1, label: '通过' },
          { value: -1, label: '拒绝' },
        ],
        // 要修改的当前行的idsearchSubmit
        row_id: 0,
        dialogStatus: '',
        // dialog的头部信息
        titleMap: {
          update: '编辑',
          create: '新增'
        },
        dialogFormVisible: false,
        deleteDialogVisible: false,
        listLoading: false,
        menuList: [],
        limitList: [],
        listQuery: {
          page: 1,
          perPage: 10,
        },
        total: 0,
        // 勾选内容
        multipleSelection: [],
        // 要删除的内容的ids
        dataIds: '',
        skippArr: []
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        for (let key in this.listQuery) {
          this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key] == 0 ? 0 : this.listQuery[key]
        }
        songAuditLog(this.listQuery).then(response => {
          this.menuList = response.data.data
          this.total = response.data.total
          this.listLoading = false
          // this.confirmBtn = false
        })
      },
      searchSubmit() {
        this.listQuery.page = 1
        this.getList()
      },
      // 点击重置
      resetSubmit() {
        this.listQuery = {
          page: 1,
          perPage: 10,
        }
        this.getList()
      },
      
    }
  }
</script>
  
<style scoped>
  [v-cloak] {
    display : none;
  }
  
  .clearfix:before,
  .clearfix:after {
    display : table;
    content : "";
  }
  
  .clearfix:after {
    clear : both;
  }
  
  .box-card {
    width : 100%;
  }
  
  .demo-form-inline {
    float : right;
  }
  
  /deep/ .el-card__header {
    padding-bottom : 0;
  }
  
  ::v-deep .el-upload-list__item {
    transition : none !important;
  }
  
  ::v-deep.avatar-uploader .el-upload {
    border        : 1px dashed #d9d9d9;
    border-radius : 6px;
    cursor        : pointer;
    position      : relative;
    overflow      : hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color : #409eff;
  }
  
  .avatar-uploader-icon {
    font-size   : 28px;
    color       : #8c939d;
    width       : 100px;
    height      : 100px;
    line-height : 100px;
    text-align  : center;
  }
  
  .avatar {
    width   : 100px;
    height  : 100px;
    display : block;
  }
  </style>
  